<template>
  <div>
    <div class="artlistcon">
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
        :success-text="successText"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="ceshi"
        >
          <!-- <van-cell v-for="item in list" :key="item.id" :title="item.title" /> -->
          <art-item
            v-for="item in list"
            :key="item.id"
            :artItem="item"
          ></art-item>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { articlesListApi } from "@/api/home";
//因为列表数据会多次用到 就开始封装组件 方便每个页面调用
import artItem from "@/components/artItem.vue";
export default {
  components: {
    artItem,
  },
  props: {
    channelsItem: Object,
  },
  data() {
    return {
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      timestamp: new Date().valueOf(),
      successText: "",
    };
  },

  //   async created() {
  //     try {
  //       let obj = {
  //         channel_id: this.channelsItem.id,
  //         timestamp: new Date().valueOf(),
  //       };
  //       //   let list = await articlesListApi(obj);
  //       //   console.log("文章列表接口" + list);
  //       let { data } = await articlesListApi(obj);
  //       this.list = data.data.results;
  //     } catch (error) {
  //       console.log(error);
  //     }
  //   },
  methods: {
    // async getArtList() {
    //   let obj = {
    //     channel_id: this.channelsItem.id,
    //     timestamp: this.timestamp,
    //   };
    //   let { data } = await articlesListApi(obj);
    //   if (data.data.pre_timestamp == null || data.data.results.length == 0) {
    //     this.finished = true;
    //   } else {
    //     this.timestamp = data.data.pre_timestamp;
    //     this.list = [...this.list, ...data.data.results];
    //     this.looding = false;
    //   }
    // },
    // async onLoad() {
    //   this.getArtList();
    // },
    //封装一个函数来请求数据
    async getArtList() {
      let obj = {
        channel_id: this.channelsItem.id,
        timestamp: this.timestamp,
      };
      //   let list = await articlesListApi(obj);
      //   console.log("文章列表接口" + list);
      let { data } = await articlesListApi(obj);
      //判断 上一次的pre_timestamp 是否为空 或者 数据的长度是否为空 如果没有就是没有数据了 把finished 设置为true
      if (data.data.pre_timestamp == null || data.data.results.length == 0) {
        this.finished = true;
      } else {
        //存储 上一次请求返回的pre_timestamp 方便下一次调用
        this.timestamp = data.data.pre_timestamp;
        //如果直接复制 会覆盖了上传一次的数据 所以用拼接数据
        //   this.list = data.data.results;
        this.list = [...this.list, ...data.data.results];
        //数据请求完毕给 加载改为false
        this.loading = false;
      }
    },
    async onLoad() {
      //   // 页面触底会触发load事件，没有铺满一屏的时候也会触发 load事件
      //   //发起异步操作
      //   //第二页的数据怎么请求，看接口文档怎么说
      //   let obj = {
      //     channel_id: this.channelsItem.id,
      //     //二次请求 请求第二页数据timestamp=上一次请求的pre_timestamp
      //     timestamp: "",
      //   };
      //   let { data } = await articlesListApi(obj);
      //   this.list = data.data.results;
      //上面方法 可以封装到一个函数 每次进行函数调用即可
      this.getArtList();
    },
    async onRefresh() {
      try {
        //接口请求
        //下拉刷新 拿最新的数据
        let obj = {
          channel_id: this.channelsItem.id,
          timestamp: new Date().valueOf(),
        };
        let { data } = await articlesListApi(obj);
        //最新的数据 是不是显示到最上面
        //往数组的前面插入数据
        this.list.unshift(...data.data.results);
        this.successText = `刷新成功，刷新了${data.data.results.length}条数据`;
        this.isLoading = false;
      } catch (err) {
        this.isLoading = false;
        this.successText = "刷新失败";
        console.log(err);
      }
    },
  },
};
</script>

<style scoped>
.artlistcon {
  position: fixed;
  top: 186px;
  left: 0px;
  right: 0px;
  bottom: 104px;
  overflow-y: auto;
}
</style>
